<template>
<ul>
  <item
    class="item-first"
    @addChild="handlerChange"
    @editChild="handlerChange"
    @deleteChild="handlerChange"
    @nodeClick="nodeClick"
    @moveDept = "moveDept"
    :open="deploy"
    :active = "active"
    :dealTree = "dealTree"
    :model="treeData">
  </item>
</ul>
</template>
<script>
  import Item from './Item.vue'
  export default {
    name: 'Tree',
    data () {
      return {
        active: '',
        deploy: false
      }
    },
    props: {
      open: {
        type: Boolean,
        default: false
      },
      treeData: Object,
      dealTree: {
        type: Object,
        default: function () {
          return {
            add: true,
            edit: true,
            move: true,
            delete: true
          }
        }
      }
    },
    methods: {
      moveDept (data) {
        this.$emit('moveDept', data)
      },
      // 传递id显示树的背景，并向上传递pId()
      nodeClick (val) {
        let ID = val._id
        this.active = ID || 'xx'
        this.$emit('nodeClick', val)
      },
      // 传递某事件和信息
      handlerChange (val) {
        this.$emit(val.event, val.val)
      }
    },
    components: {
      Item
    },
    watch: {
      // 初始向子组件传递一个id渲染树的默认背景
      treeData () {
        this.active = this.treeData._id
      }
    },
    beforeMount () {
      this.deploy = this.open
    }
  }
</script>
<style lang="stylus" scoped>
  ul
    padding-left 17px
    line-height 1.5em
</style>
